<template>
  <div ref="chart" style="width: 98%;min-width:360px ;height: 400px;"></div>
</template>
<script>
  import {
    EmptyChart
  } from '@/views/components/chart'
  import {
    today
  } from '@/views/components/utils'
  import deviceEnvironmentAPI from '@/api/device/environment'
  import departmentAPI from '@/api/system/dept'

  const createSerie = function (name, unit, min, max, splitNumber, centerLeft) {
    return {
      name,
      type: 'gauge',
      min,
      max,
      splitNumber,
      radius: '90%',
      center: [centerLeft, '48%'],
      detail: {
        show: true,
        width: 80,
        height: 20,
        borderRadius: 3,
        backgroundColor: 'inherit',
        color: '#fff',
        fontSize: 18,
        formatter: '{value}' + unit
      },
      progress: {
        show: true,
        overlap: true
      }
    }
  }

  const createSerieData = function (minName, minValue, minEnvironment, minColor, maxName, maxValue, maxEnvironment,
    maxColor) {
    return [{
        name: minName,
        value: minValue,
        environment: minEnvironment,
        title: {
          offsetCenter: ['-40%', '90%']
        },
        detail: {
          offsetCenter: ['-40%', '110%'],
        },
        itemStyle: {
          color: minColor
        }
      },
      {
        name: maxName,
        value: maxValue,
        environment: maxEnvironment,
        title: {
          offsetCenter: ['40%', '90%']
        },
        detail: {
          offsetCenter: ['40%', '110%'],
        },
        itemStyle: {
          color: maxColor
        }
      }
    ]
  }


  export default {
    name: 'EnvironmentLineChart',
    mixins: [EmptyChart],
    data() {
      return {
        updateOpts: null,
        chartOption: {
          tooltip: {
            // formatter: '{a} <br/>{b} : {c}%'
            formatter: function (params, ticket, callback) {
              // console.log(params)
              const {
                name,
                value,
                seriesName,
                data
              } = params
              var defaultHmtl = `${seriesName}<br/>${name}:${value}`
              const {
                environment
              } = data
              if (environment == undefined || environment == null) {
                return defaultHmtl
              }
              const {
                deptId,
                createTime
              } = environment
              defaultHmtl = `${seriesName}<br/>${name}:${value}<br/>${createTime}`
              if (data.department !== undefined) {
                return defaultHmtl + `<br/>${data.department.name}`
              }
              departmentAPI.oneById(deptId).then(res => {
                data.department = res.data
                const html = defaultHmtl + `<br/>${data.department.name}`
                callback(ticket, html)
              })
              return defaultHmtl
            }
          },
          series: [
            // left
            createSerie('温度', '℃', -30, 50, 8, '12%'),
            createSerie('湿度', '%', 0, 100, 10, '37%'),
            createSerie('PM2.5', 'μg/m³', 0, 1000, 10, '63%'),
            createSerie('TOVC', 'μg/m³', 0, 1000, 10, '88%')
          ]
        },
        queryParams: {
          date: today(),
          deptId: null
        },
        maxAndMin: {}
      }
    },
    created() {
      this.queryData()
    },
    methods: {
      queryData() {
        const vm = this
        deviceEnvironmentAPI.maxAndMin(this.queryParams).then(res => {
          vm.maxAndMin = Object.assign({}, res.data)
          vm.updateChart()
        })
      },
      createOption() {
        const {
          maxTemp,
          minTemp,
          maxHumi,
          minHumi,
          maxTvoc,
          minTvoc,
          maxPm2d5,
          minPm2d5,
          map
        } = this.maxAndMin
        if (maxTemp === undefined) {
          return null
        }
        return {
          series: [{
              data: createSerieData('最低', minTemp, map.minTemp, '#67e0e3', '最高', maxTemp, map.maxTemp, '#fd666d')
            },
            {
              data: createSerieData('最低', minHumi, map.minHumi, '#67e0e3', '最高', maxHumi, map.maxHumi, '#fd666d')
            },
            {
              data: createSerieData('最低', minPm2d5, map.minPm2d5, '#67e0e3', '最高', maxPm2d5, map.maxPm2d5, '#fd666d')
            },
            {
              data: createSerieData('最低', minTvoc, map.minTvoc, '#67e0e3', '最高', maxTvoc, map.maxTvoc, '#fd666d')
            },
          ]
        }
      },
    }
  }

</script>
